<template>
  <div class="product-list">
    <!-- 商品列表
      gutter 设置格子之间的间距，默认单位为px
      column-num 设置一行显示商品数量
      border 是否显示边框，false 去除边框
      center 是否将格子内容居中显示，false 内容左对齐
    -->
    <van-grid
      :gutter="15"
      :column-num="2"
      :border="false"
      :center="false"
    >
      <!-- :to 设置路由跳转的，item.id 就是商品 id -->
      <van-grid-item
        v-for="item in productsData"
        :key="item.id"
        :to="{
          name: 'product',
          params: {
            productId: item.id
          }
        }"
      >
        <!-- 商品图 -->
        <van-image :src="item.image" height="165"/>
        <!-- 商品标题 -->
        <p class="product-title" v-text="item.store_name"></p>
        <!-- 商品价格 -->
        <p class="product-price">￥{{ item.price }}</p>
        <!-- 商品销量 -->
        <p class="product-sales">已售{{ item.sales }}件</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script setup>
/*
定义 props 属性，productsData 接收父组件传递过来的数据，并且通过解构的方式得到父组件传递过来的数据，简化了书写；
因为 ProductList.vue 会被多个不同组件使用，获取到商品列表数据是不一样的，所以发送请求获取商品列表信息的操作就在父组件执行；
*/
const { productsData } = defineProps({
  productsData: {
    type: Array,
    require: true
  }
})
</script>
<style lang='scss' scoped>
.product-list {
  margin: 10px 0;
  :deep(.van-grid-item__content) {
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    /* 商品标题 */
    .product-title {
      font-size: 14px;
      padding: 5px 8px 0;
      // 设置文字超出两行后，使用 ... 显示
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.2;
    }
    /* 商品价格 */
    .product-price {
      color: #ee3e3e;
      font-size: 22px;
      font-weight: 700;
      padding-left: 5px;
    }
    /* 商品销量 */
    .product-sales {
      color: #ccc;
      font-size: 14px;
      padding-left: 8px;
    }
  }
}
</style>
